<template>
    <el-carousel :interval="3000" height="300px">
        <el-carousel-item v-for="(item, index) in imageList" :key="index" >
            <img :src="item.imgUrl" alt="`轮播图${ index + 1 }`" class="carousel-image" >
        </el-carousel-item>
    </el-carousel>
</template>

<script>
    import { Carousel, CarouselItem } from 'element-ui';
    
    export default {
        components: {
            [Carousel.name]: Carousel,
            [CarouselItem.name]: CarouselItem
        },
        data() {
            return {
                imageList: [
                    { imgUrl:''},
                    
                ]
            };
        },
        methods:{
            async fetchData(){
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/image/findByposition",
                    data:{
                        position:'Carousel'
                    },
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    if (res.data.data.length != 0) {
                        this.imageList =res.data.data ;
                        console.log(this.imageList);
                    } 
                })
            },
            handleImageError(e){
                console.error('图片加载失败:', e.target.src);
                // 这里可以设置一个默认图片路径，或者做其他错误处理
                e.target.src = 'path/to/default/image.jpg'; // 替换为默认图片路径
            }
        },
        mounted(){
            this.fetchData();
        }
    };
</script>

<style scoped>
    /* 可选：自定义样式 */
    .el-carousel__container {
        width: 100%; /* 调整为你需要的宽度 */
        height: 100%; /* 调整为你需要的高度 */
        overflow: hidden;
    }
    .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 或者 object-fit: contain / fill / none / scale-down */
    }
</style>